<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box2">
            <div class="header">
                <Step
                    ref="stepRef"
                    :current-step="currentStep"
                    :steps-label="stepsLabel"
                    :total-steps="stepsLabel.length" />
            </div>
            <div class="container">
                <div class="content">
                    <div class="left_box">
                        <div v-show="currentStep == 1">
                            <ActivityInfo
                                ref="ActivityInfoRef"
                                :page-type="pageType"
                                :group_id="group_id"
                                @submit="onChildValid" />
                        </div>
                        <div v-show="currentStep == 2">
                            <CheckInSettings
                                ref="CheckInSettingsRef"
                                :page-type="pageType"
                                @submit="onChildValid"
                                @toData="getInfo" />
                        </div>
                        <div v-show="currentStep == 3">
                            <CustomerTag ref="CustomerTagRef" :page-type="pageType" @submit="onPreserve" />
                        </div>
                    </div>
                    <div class="right_box">
                        <!-- <MobilePhone :formInfo="formInfo" /> -->
                        <ActivityPhone :form-info="formInfo" :activity_name="activity_name" />
                    </div>
                </div>
            </div>
        </el-scrollbar>
        <div class="footer_box">
            <el-button v-if="currentStep == 1" @click="onRouter">取消</el-button>
            <el-button v-else @click="onStep">上一步</el-button>
            <el-button v-if="currentStep != 3" type="primary" @click="onNext(currentStep)">下一步</el-button>
            <el-button v-else type="primary" @click="onNext(currentStep)">{{
                pageType == 'look' ? '返回' : '保存'
            }}</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import Step from '@/components/Step.vue';
import { DFormat } from '@/utils/utils';
import { signCreate, signLook, signEdit } from '@/api/smartMarketing/signIn';
import ActivityInfo from './components/ActivityInfo.vue';
import CheckInSettings from './components/CheckInSettings.vue';
import MobilePhone from './components/MobilePhone.vue';
import CustomerTag from './components/CustomerTag.vue';
import ActivityPhone from '@/components/zw/phonePreview/activityPhonePreview/signIn/index.vue';
import { useStore } from '@/store';
const store = useStore();
const router = useRouter();
const route = useRoute();
const pageType = route.query.type;
const ActivityInfoRef: any = ref(null);
const CheckInSettingsRef: any = ref(null);
const CustomerTagRef: any = ref(null);
const stepRef: any = ref(null);
const formInfo = ref({});
const stepsLabel: any = ref([
    { title: '活动信息', stepIndex: 1 },
    { title: '签到设置', stepIndex: 2 },
    { title: '客户标签设置', stepIndex: 3 }
]);
const group_id = ref(Number(route.query?.group_id));
const currentStep = ref(1);
const activity_name = ref('');
const scrollbarRef = ref<any>(null);
/**
 * @description: 滚动到顶部
 */
const setScrollTopHandle = () => {
    nextTick(() => {
        scrollbarRef.value?.setScrollTop(0);
    });
};
const onStep = () => {
    currentStep.value--;
    stepRef.value.back();
    setScrollTopHandle();
};
const onChildValid = (v: number) => {
    currentStep.value++;
    stepRef.value.next();
    setScrollTopHandle();
};
const onRouter = () => {
    store.dispatch('setGroupId', ActivityInfoRef.value.formData.group_id);
    router.back();
};
const onNext = async (curStep: number) => {
    if (pageType == 'look') {
        currentStep.value == 3 && onRouter();
        currentStep.value++;
        stepRef.value.next();
        setScrollTopHandle();
        return;
    }
    if (curStep == 1) {
        // 活动信息
        ActivityInfoRef.value.onSubmit();
    }
    // 签到设置
    if (curStep == 2) {
        CheckInSettingsRef.value.onSubmit();
    }
    if (curStep == 3) {
        if (pageType == 'look') {
            onRouter();
            return;
        }
        CustomerTagRef.value.onSubmit();
    }
};

const onPreserve = async () => {
    const params = {
        ...ActivityInfoRef.value.formData,
        ...CheckInSettingsRef.value.formData,
        ...CustomerTagRef.value.formData
    };
    delete params.effect_time;

    if (pageType) {
        signEdit(params).then(() => {
            ElMessage.success('编辑成功');
            router.push({
                path: '/smartMarketing/interact/signIn',
                query: {
                    group_id: ActivityInfoRef.value.formData.group_id
                }
            });
        });
    } else {
        signCreate(params).then(() => {
            ElMessage.success('新建成功');
            router.push({
                path: '/smartMarketing/interact/signIn',
                query: {
                    group_id: ActivityInfoRef.value.formData.group_id
                }
            });
        });
    }
};
const onSignLook = async () => {
    const res = await signLook({ activity_id: route.query.id });

    // 活动信息
    ActivityInfoRef.value.formData = {
        is_auth: res.is_auth,
        activity_id: res.id,
        official_account_id: res.official_account_id,
        activity_name: res.title,
        group_id: res.group_id,
        period_type: res.effective_type,
        begin_date: res.effective_start_time,
        end_date: res.effective_end_time,
        explain: res.explain,
        effect_time: [res.effective_start_time, res.effective_end_time]
    };
    CheckInSettingsRef.value.AllTags = res.sign_config.map(item => item.stage_cust_tags);
    const arr: any = [];
    res.sign_config.forEach((item: any) => {
        delete item.stage_id;
        delete item.reward_id;
        item.stage_cust_tags = item.stage_cust_tags.map(item => item.id);
        arr.push(item);
    });

    // 签到设置
    const kfList = JSON.parse(JSON.stringify(res.exchange_kf));
    CheckInSettingsRef.value.formData = {
        sign_type: res.sign_type,
        sign_config: arr, //签到设置
        exchange_kf: res.exchange_kf.map((item: any) => item.id)
    };
    CheckInSettingsRef.value.employeeList = kfList?.map((item: any) => ({ ...item, type: 'user' }));
    // 客户标签设置
    CustomerTagRef.value.formData.join_cust_tags = res.join_cust_tags.map((item: any) => item.id);
    CustomerTagRef.value.AllTags = res.join_cust_tags;
};
const getInfo = (val: any) => {
    formInfo.value = val;
};
onMounted(() => {
    pageType && onSignLook();
});
</script>

<style lang="scss" scoped>
.header {
    padding: 21px;
    border: 1px solid #eaeaea;
    border-top: none;
    border-radius: 1px;
    box-shadow: 0 4px 4px 1px rgb(240 240 240 / 50%);
    background: #fff;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.container {
    padding: 24px;
    min-height: calc(100vh - 288px);
    box-sizing: border-box;
    box-shadow: 0 4px 4px 1px rgb(240 240 240 / 50%);
    border-radius: 4px;
    opacity: 1;
    border: 1px solid #eaeaea;
    border-bottom: none;
    background: #fff;

    .content {
        display: flex;

        .left_box {
            width: 60%;
        }

        .right_box {
            display: flex;
            justify-content: center;
            width: 40%;
            padding-bottom: 10px;
        }
    }

    .btn_box {
        z-index: 99;
        position: absolute;
        bottom: 0;
        left: 20px;
        height: 64px;
        width: calc(100% - 40px);
        box-sizing: border-box;
        padding-right: 16px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        background: #fff;
        box-shadow: 0 0 10px 0 rgb(212 212 212 / 50%);
        border-radius: 2px;
    }
}
</style>
